<template>
  <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">
        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>
      </div>
    </section>

    <table>
      <tr>
        <td>
          用户名：
          <input type="text" v-model="username" placeholder="输入用户名" />&emsp;
        </td>
        <td>{{namemsg}}</td>
      </tr>
      <tr>
        <td>
          密&emsp;码：
          <input type="text" v-model="password" placeholder="密码" />&emsp;
        </td>
        <td>{{psdmsg}}</td>
      </tr>
      <tr>
        <td>
          Type：
          <select v-model="type" id="sel">
            <option value="0" selected="selected">普通用户</option>
            <option value="1">超级用户</option>
            <option value="2">网站编辑</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          phone:
          <input type="text" v-model="phone" placeholder="请输入电话号" />
        </td>
        <td>{{phonemsg}}</td>
      </tr>
      <tr>
        <td>
          num:&emsp;
          <input type="text" v-model="num" />
        </td>
      </tr>
      <tr style="float:left">
        <td>验证码：</td>
        <td><img class='code'  :src="imgcode" alt="图片加载失败" @click="get_code"></td>
      </tr>
      <tr>
        <td>&emsp;&emsp;&emsp;
          <input type="text" v-model="code" placeholder="请输入验证码"/>
        </td>
        <td>{{codemsg}}</td>
      </tr>
      <tr>
        <td>&emsp;
          <Button @click="submit" color="blue" width="100px">提交</Button>
        </td>
      </tr>
    </table>

    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>


 
<script>
import axios from "axios";
import myheader from "./myheader.vue";

export default {
  data() {
    return {
      msg: "这是一个变量",
      //面包屑导航变量
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "注册页面", route: { name: "Register" } }
      ],
      username: "",
      password: "",
      type: 0,
      phone: "",
      num: 0,
      code:'',
      charEle:'',
      namemsg:'',
      psdmsg:"",
      phonemsg:'',
      codemsg:'',
      imgcode:'',
    };
  },
  // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
    created(){
       
    },
  mounted: function() {
       this.rand()
       this.get_code()
  },
  methods: {
      rand() {
            this.charEle= Math.floor(Math.random()*(9999-1000))+1000;
        },
        zengze(){
            var patt = /^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/;
            var res=patt.test("11111a"); 
            console.log(res)
        },
        get_code(){
        axios({
              url:"http://127.0.0.1:8000/myapp/mycode/",
              method:'get',
              responseType: 'blob',
          }).then(res=>{
              this.imgcode  = window.URL.createObjectURL(res.data);
              //src 就是一个可以显示图片的相对路径。因为window.URL.crateObjectURL(blob)已经进行了转换
        })
        },
    //定义提交事件
    submit: function() {
      if (this.username === "") {
            this.namemsg="您没有输入用户名";
            return false;
      }
      if(this.password==""){  
            this.psdmsg="密码为空";
            return false;
      }else if(!/^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/.test(this.password)){
          this.psdmsg="密码格式错误 以数字字母符号组成"
          return false;
      }
      if(this.phone==""){ 
          this.phonemsg="手机号为空";
          return false;
      }else if (!/^1[365789]\d{9}$/.test(this.phone)){
            this.phonemsg="手机号格式不正确";
            return false;
      }
      if (this.code==""){
            this.codemsg="验证码为空";
            return false 
      }
        // 请求后台
      this.axios.get("http://127.0.0.1:8000/myapp/register/", {
          params: { username: this.username, password: this.password,type:this.type,phone:this.phone,num:this.num,code:this.code}
          })
          .then(result => {
          console.log(result.data);
          this.$Message(result.data.msg);
          // localStorage.setItem('username',result.data.username)
          // localStorage.setItem('uid',result.data.uid  )
          this.$router.push('/login')
          });
      
    }
  }
};
</script>
 
<style>
.td {
  padding: 10px;
}
.code{
  cursor: pointer;
}
</style>